<template>
  <div id="sign-in">
    <div class="background-image"></div>
    <div class="main-container container-limited container-fluid">
      <img
        src="../../../assets/logo.png"
        alt="logo"
        class="logo s90 pointer hidden-xs-only"
        @click="toHomepage">
      <el-row :gutter="30">
        <el-col :sm="14" class="title-container none-select text-center">
          <h1 class="title">
            <span class="f-white pointer" @click="toHomepage">知士荟</span>
          </h1>
          <h2 class="desc">
            <span class="f-white pointer" @click="toHomepage">在交流中一起成长</span>
          </h2>
        </el-col>
        <el-col :sm="10">
          <sign-in-box />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import SignInBox from '@/views/users/sign_in/sign-in-box';

export default {
  name: 'UserSignIn', // 用户登录、注册页面
  components: { SignInBox },
  methods: {
    // 前往首页
    toHomepage() {
      this.$router.push('/');
    },
  },
};
</script>

<style lang="scss">
@import '~@/assets/scss/values.scss';

#sign-in {

  .background-image {
    position: fixed; // 定位占满整个页面
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url('../../../assets/images/sign_in/background.jpg'); // 相对于这个文件的路径
    background-size: 100% 100%; // 背景图片拉伸铺满
  }

  .logo {
    position: absolute;
    z-index: 10;
  }

  .title-container {
    .title { font-size: 2.5rem; }
    .desc { font-size: 1.875rem; }
  }

  @media screen and (min-width: $sm) {
    .main-container { padding-top: 6.5625rem; }
    .title-container .title { margin-top: 6.25rem; }
  }
}
</style>
